import React, { useEffect, useMemo } from 'react'
import style from './Index.module.less'
import { Form, Row, Col, Space, Button, message } from 'antd'
import { awaitWrap } from '@src/assets/js/tool'
import { useDispatch } from 'react-redux'
import { delWindow } from '@src/redux/actions'
import { getRequest } from './ajax'

function Text ({ value, format }) {
  if (value && format) {
    return format(value)
  }
  if (value) {
    return value
  }
  return '无'
}

async function initHandle (id, formRef) {
  const h = message.loading('加载中', 120)
  const [e, d] = await awaitWrap(getRequest(id))
  h()
  if (e === null && d) {
    formRef.setFieldsValue(d)
  }
}

const { Item, useForm } = Form

function Main ({ title, meta }) {
  const dispatch = useDispatch()
  const [formRef] = useForm()
  const id = useMemo(() => {
    return meta && meta.id ? meta.id : ''
  }, [meta])
  useEffect(() => {
    if (id && formRef) {
      initHandle(id, formRef)
    }
  }, [id, formRef])
  return (
    <div className={style.container}>
      <div className={style['title-line']}>
        <span>{title}</span>
      </div>
      <div className={style.inner}>
        <div className={style.form}>
          <Form form={formRef} labelCol={{ flex: '120px' }}>
            <Row gutter={24}>
              <Col span={24}>
                <Item name='year' label='年份'>
                  <Text />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_const_num' label='建设工程数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_const_total' label='建设工程标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_finance_num' label='金融数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_finance_total' label='金融标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_realestate_num' label='房地产数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_realestate_total' label='房地产标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_business_num' label='买卖数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_business_total' label='买卖标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_lease_num' label='租赁数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_lease_total' label='租赁标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_stock_num' label='股权转让数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_stock_total' label='股权转让标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_land_num' label='土地交易数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_land_total' label='土地交易标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_insure_num' label='保险数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_insure_total' label='保险标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_property_num' label='物业数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_property_total' label='物业标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_agriculture_num' label='农业生产经营数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_agriculture_total' label='农业生产经营标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_elebusiness_num' label='电子商务数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_elebusiness_total' label='电子商务标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_traaccident_num' label='交通事故赔偿数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_traaccident_total' label='交通事故赔偿标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_medicdisput_num' label='医疗纠纷数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_medicdisput_total' label='医疗纠纷标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_other_num' label='其他数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_other_total' label='其他标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_knowproperty_num' label='知识产权数量'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_knowproperty_total' label='知识产权标的'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_admit_num' label='案件数'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_admit_amount' label='标的额'>
                  <Text format={v => `${v}万元`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_involve_hong_kong' label='涉港'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_involve_macao' label='涉澳'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_involve_taiwan' label='涉台'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={12}>
                <Item name='case_involve_other' label='涉其他'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={24}>
                <Item name='case_involve_one_side' labelCol={{ flex: '250px' }} label='一方当事人为港澳台地区及其他国家的'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={24}>
                <Item name='case_involve_both_sides' labelCol={{ flex: '250px' }} label='双方当事人为港澳台地区及其他国家的'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={24}>
                <Item name='case_admit_national' labelCol={{ flex: '250px' }} label='裁决承认或执行地国籍'>
                  <Text format={v => `${v}件`} />
                </Item>
              </Col>
              <Col span={24}>
                <Item name='remark' label='备注'>
                  <Text />
                </Item>
              </Col>
              <Col span={24}>
                <Item label=' ' colon={false}>
                  <Space size='middle'>
                    <Button htmlType='button' onClick={() => { dispatch(delWindow(`CaseAcceptSubmitDetail-${id}`)) }}>关闭</Button>
                  </Space>
                </Item>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default Main
